<!-- 
  系统设置页面 - 提供系统配置管理功能
  功能包括：
  - 网站信息配置（名称、描述、Logo等）
  - 邮件服务配置（SMTP设置）
  - 备份策略配置（自动备份、频率等）
  - 系统日志查看和管理
-->
<template>
  <div class="system-settings">
    <!-- 示例数据提示 - 当后端API不可用时显示 -->
    <el-alert v-if="isUsingSampleData" title="当前显示的是示例数据" description="由于后端API暂时不可用，正在显示示例数据。实际数据将在后端服务可用时自动加载。"
      type="info" :closable="false" show-icon class="sample-data-notice" />

    <!-- 页面标题和全局保存按钮 -->
    <div class="page-header">
      <h2 class="page-title">系统设置</h2>
      <el-button type="primary" @click="saveAllSettings" :loading="isSaving">
        <el-icon>
          <Check />
        </el-icon>
        保存所有设置
      </el-button>
    </div>

    <!-- 设置选项卡容器 - 使用Element Plus的Tabs组件 -->
    <el-tabs v-model="activeTab" type="border-card" class="settings-tabs">
      <!-- 网站信息设置选项卡 -->
      <el-tab-pane label="网站信息" name="site-info">
        <div class="tab-content">
          <!-- 网站信息表单 - 包含网站基本信息配置 -->
          <el-form :model="siteInfoForm" :rules="siteInfoRules" ref="siteInfoFormRef" label-width="120px">
            <!-- 网站名称输入框 -->
            <el-form-item label="网站名称" prop="siteName">
              <el-input v-model="siteInfoForm.siteName" placeholder="请输入网站名称" />
            </el-form-item>

            <!-- 网站描述文本域 -->
            <el-form-item label="网站描述" prop="siteDescription">
              <el-input v-model="siteInfoForm.siteDescription" type="textarea" :rows="3" placeholder="请输入网站描述"
                class="site-description-textarea" />
            </el-form-item>

            <!-- 网站关键词输入框 -->
            <el-form-item label="网站关键词" prop="siteKeywords">
              <el-input v-model="siteInfoForm.siteKeywords" placeholder="请输入网站关键词，用逗号分隔" />
            </el-form-item>

            <!-- 网站Logo URL输入框 -->
            <el-form-item label="网站Logo" prop="siteLogo">
              <el-input v-model="siteInfoForm.siteLogo" placeholder="请输入Logo URL" />
            </el-form-item>

            <!-- 网站图标URL输入框 -->
            <el-form-item label="网站图标" prop="siteFavicon">
              <el-input v-model="siteInfoForm.siteFavicon" placeholder="请输入Favicon URL" />
            </el-form-item>

            <!-- ICP备案信息输入框 -->
            <el-form-item label="备案信息" prop="icp">
              <el-input v-model="siteInfoForm.icp" placeholder="请输入ICP备案号" />
            </el-form-item>

            <!-- 版权信息输入框 -->
            <el-form-item label="版权信息" prop="copyright">
              <el-input v-model="siteInfoForm.copyright" placeholder="请输入版权信息" />
            </el-form-item>

            <!-- 联系邮箱输入框 -->
            <el-form-item label="联系邮箱" prop="contactEmail">
              <el-input v-model="siteInfoForm.contactEmail" type="email" placeholder="请输入联系邮箱" />
            </el-form-item>

            <!-- 保存网站信息按钮 -->
            <el-form-item>
              <el-button type="primary" @click="saveSiteInfo" :loading="isSaving">
                <el-icon>
                  <Check />
                </el-icon>
                保存网站信息
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>

      <!-- 邮件配置设置选项卡 -->
      <el-tab-pane label="邮件配置" name="email-config">
        <div class="tab-content">
          <!-- 邮件配置表单 - 包含SMTP服务器配置 -->
          <el-form :model="emailConfigForm" :rules="emailConfigRules" ref="emailConfigFormRef" label-width="120px">
            <!-- SMTP服务器地址输入框 -->
            <el-form-item label="SMTP服务器" prop="smtpHost">
              <el-input v-model="emailConfigForm.smtpHost" placeholder="例如：smtp.gmail.com" />
            </el-form-item>

            <!-- SMTP端口号输入框 -->
            <el-form-item label="SMTP端口" prop="smtpPort">
              <el-input-number v-model="emailConfigForm.smtpPort" :min="1" :max="65535" placeholder="例如：587"
                style="width: 100%" />
            </el-form-item>

            <!-- 邮箱账号输入框 -->
            <el-form-item label="邮箱账号" prop="emailUser">
              <el-input v-model="emailConfigForm.emailUser" placeholder="请输入邮箱账号" />
            </el-form-item>

            <!-- 邮箱密码输入框 -->
            <el-form-item label="邮箱密码" prop="emailPassword">
              <el-input v-model="emailConfigForm.emailPassword" type="password" placeholder="请输入邮箱密码或授权码" />
            </el-form-item>

            <!-- 发件人名称输入框 -->
            <el-form-item label="发件人名称" prop="senderName">
              <el-input v-model="emailConfigForm.senderName" placeholder="请输入发件人显示名称" />
            </el-form-item>

            <!-- SSL加密开关 -->
            <el-form-item label="启用SSL" prop="useSSL">
              <el-switch v-model="emailConfigForm.useSSL" />
            </el-form-item>

            <!-- 保存和测试按钮 -->
            <el-form-item>
              <el-button type="primary" @click="saveEmailConfig" :loading="isSaving">
                <el-icon>
                  <Check />
                </el-icon>
                保存邮件配置
              </el-button>
              <el-button type="success" @click="testEmailConfig" :loading="isTestingEmail" style="margin-left: 10px;">
                <el-icon>
                  <Message />
                </el-icon>
                测试邮件配置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>

      <!-- 备份设置选项卡 -->
      <el-tab-pane label="备份设置" name="backup-config">
        <div class="tab-content">
          <!-- 备份配置表单 - 包含自动备份策略配置 -->
          <el-form :model="backupConfigForm" :rules="backupConfigRules" ref="backupConfigFormRef" label-width="120px">
            <!-- 自动备份开关 -->
            <el-form-item label="自动备份" prop="autoBackup">
              <el-switch v-model="backupConfigForm.autoBackup" />
            </el-form-item>

            <!-- 备份频率选择器 - 仅在启用自动备份时显示 -->
            <el-form-item label="备份频率" prop="backupFrequency" v-if="backupConfigForm.autoBackup">
              <el-select v-model="backupConfigForm.backupFrequency" placeholder="请选择备份频率">
                <el-option label="每天" value="daily" />
                <el-option label="每周" value="weekly" />
                <el-option label="每月" value="monthly" />
              </el-select>
            </el-form-item>

            <!-- 保留备份数量输入框 -->
            <el-form-item label="保留备份数" prop="keepBackups">
              <el-input-number v-model="backupConfigForm.keepBackups" :min="1" :max="100" placeholder="保留的备份文件数量"
                style="width: 100%" />
            </el-form-item>

            <!-- 备份内容复选框组 -->
            <el-form-item label="备份内容" prop="backupContent">
              <el-checkbox-group v-model="backupConfigForm.backupContent">
                <el-checkbox label="database">数据库</el-checkbox>
                <el-checkbox label="files">文件</el-checkbox>
                <el-checkbox label="config">配置文件</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <!-- 保存和立即备份按钮 -->
            <el-form-item>
              <el-button type="primary" @click="saveBackupConfig" :loading="isSaving">
                <el-icon>
                  <Check />
                </el-icon>
                保存备份配置
              </el-button>
              <el-button type="success" @click="createBackup" :loading="isCreatingBackup" style="margin-left: 10px;">
                <el-icon>
                  <Download />
                </el-icon>
                立即备份
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>

      <!-- 系统日志选项卡 -->
      <el-tab-pane label="系统日志" name="system-logs">
        <div class="tab-content">
          <!-- 日志查询和操作工具栏 -->
          <div class="logs-header">
            <!-- 日志筛选器 -->
            <div class="logs-filters">
              <!-- 日志级别筛选下拉框 -->
              <el-select v-model="logLevel" placeholder="日志级别" style="width: 120px;">
                <el-option label="全部" value="" />
                <el-option label="错误" value="error" />
                <el-option label="警告" value="warn" />
                <el-option label="信息" value="info" />
                <el-option label="调试" value="debug" />
              </el-select>

              <!-- 查询按钮 -->
              <el-button type="primary" @click="loadLogs">
                <el-icon>
                  <Search />
                </el-icon>
                查询
              </el-button>
            </div>

            <!-- 日志操作按钮组 -->
            <div class="logs-actions">
              <!-- 清空日志按钮 -->
              <el-button type="danger" @click="clearLogs" :loading="isClearingLogs">
                <el-icon>
                  <Delete />
                </el-icon>
                清空日志
              </el-button>
            </div>
          </div>

          <!-- 日志内容表格 -->
          <div class="logs-content">
            <el-table :data="systemLogs" class="logs-table" v-loading="isLoadingLogs">
              <!-- 时间列 -->
              <el-table-column prop="timestamp" label="时间" width="180">
                <template #default="{ row }">
                  {{ formatDateTime(row.timestamp) }}
                </template>
              </el-table-column>

              <!-- 日志级别列 -->
              <el-table-column prop="level" label="级别" width="80">
                <template #default="{ row }">
                  <el-tag :type="getLogLevelType(row.level)" size="small">
                    {{ row.level.toUpperCase() }}
                  </el-tag>
                </template>
              </el-table-column>

              <!-- 模块列 -->
              <el-table-column prop="module" label="模块" width="120" />

              <!-- 消息列 -->
              <el-table-column prop="message" label="消息" />
            </el-table>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================
// Vue 3 Composition API核心功能
import { ref, reactive, onMounted } from 'vue'
// Element Plus组件和消息提示
import { ElMessage, ElMessageBox } from 'element-plus'
// Element Plus图标组件
import { Check, Message, Download, Search, Delete } from '@element-plus/icons-vue'
// API工具函数和常量
import { get, post, put, API_PATHS } from '@/utils/api'

// ==================== 状态管理 ====================
/** 是否正在使用示例数据 */
const isUsingSampleData = ref(false)
/** 是否正在保存设置 */
const isSaving = ref(false)
/** 是否正在测试邮件配置 */
const isTestingEmail = ref(false)
/** 是否正在创建备份 */
const isCreatingBackup = ref(false)
/** 是否正在清空日志 */
const isClearingLogs = ref(false)
/** 是否正在加载日志 */
const isLoadingLogs = ref(false)

// ==================== 页面状态 ====================
/** 当前激活的选项卡名称 */
const activeTab = ref('site-info')

// ==================== 表单引用 ====================
/** 网站信息表单引用 */
const siteInfoFormRef = ref()
/** 邮件配置表单引用 */
const emailConfigFormRef = ref()
/** 备份配置表单引用 */
const backupConfigFormRef = ref()

// ==================== 表单数据 ====================
/** 网站信息表单数据 */
const siteInfoForm = reactive({
  siteName: '',           // 网站名称
  siteDescription: '',    // 网站描述
  siteKeywords: '',       // 网站关键词
  siteLogo: '',          // 网站Logo URL
  siteFavicon: '',       // 网站图标 URL
  icp: '',               // ICP备案信息
  copyright: '',         // 版权信息
  contactEmail: ''       // 联系邮箱
})

/** 邮件配置表单数据 */
const emailConfigForm = reactive({
  smtpHost: '',          // SMTP服务器地址
  smtpPort: 587,         // SMTP端口号
  emailUser: '',         // 邮箱账号
  emailPassword: '',     // 邮箱密码
  senderName: '',        // 发件人名称
  useSSL: true          // 是否启用SSL
})

/** 备份配置表单数据 */
const backupConfigForm = reactive({
  autoBackup: false,     // 是否启用自动备份
  backupFrequency: 'daily', // 备份频率
  keepBackups: 10,       // 保留备份数量
  backupContent: ['database', 'files'] // 备份内容
})

// ==================== 类型定义 ====================
/** 系统日志接口定义 */
interface SystemLog {
  timestamp: string      // 时间戳
  level: string         // 日志级别
  module: string        // 模块名称
  message: string       // 日志消息
}

// ==================== 日志相关状态 ====================
/** 当前选中的日志级别 */
const logLevel = ref('')
/** 系统日志列表 */
const systemLogs = ref<SystemLog[]>([])

// ==================== 表单验证规则 ====================
/** 网站信息表单验证规则 */
const siteInfoRules = {
  siteName: [
    { required: true, message: '请输入网站名称', trigger: 'blur' },
    { min: 2, max: 50, message: '网站名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  siteDescription: [
    { max: 200, message: '网站描述不能超过 200 个字符', trigger: 'blur' }
  ],
  siteKeywords: [
    { max: 100, message: '网站关键词不能超过 100 个字符', trigger: 'blur' }
  ],
  siteLogo: [], // 移除URL验证
  siteFavicon: [], // 移除URL验证
  icp: [
    { max: 50, message: '备案信息不能超过 50 个字符', trigger: 'blur' }
  ],
  copyright: [
    { max: 100, message: '版权信息不能超过 100 个字符', trigger: 'blur' }
  ],
  contactEmail: [
    { required: true, message: '请输入联系邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ]
}

/** 邮件配置表单验证规则 */
const emailConfigRules = {
  smtpHost: [{ required: true, message: '请输入SMTP服务器地址', trigger: 'blur' }],
  smtpPort: [{ required: true, message: '请输入SMTP端口', trigger: 'blur' }],
  emailUser: [{ required: true, message: '请输入邮箱账号', trigger: 'blur' }],
  emailPassword: [{ required: true, message: '请输入邮箱密码', trigger: 'blur' }]
}

/** 备份配置表单验证规则 */
const backupConfigRules = {
  keepBackups: [{ required: true, message: '请输入保留备份数量', trigger: 'blur' }]
}

// ==================== 示例数据 ====================
/** 网站信息示例数据 */
const sampleSiteInfo = {
  siteName: '我的博客',
  siteDescription: '一个专注于技术分享的个人博客',
  siteKeywords: '技术,博客,Vue,React,JavaScript',
  siteLogo: '/logo.png',
  siteFavicon: '/favicon.ico',
  icp: '京ICP备12345678号',
  copyright: '© 2024 我的博客. All rights reserved.',
  contactEmail: 'admin@example.com'
}

/** 邮件配置示例数据 */
const sampleEmailConfig = {
  smtpHost: 'smtp.gmail.com',
  smtpPort: 587,
  emailUser: 'admin@example.com',
  emailPassword: '',
  senderName: '我的博客',
  useSSL: true
}

/** 备份配置示例数据 */
const sampleBackupConfig = {
  autoBackup: true,
  backupFrequency: 'daily',
  keepBackups: 10,
  backupContent: ['database', 'files']
}

/** 系统日志示例数据 */
const sampleSystemLogs = [
  {
    timestamp: new Date().toISOString(),
    level: 'info',
    module: '系统',
    message: '系统启动成功'
  },
  {
    timestamp: new Date(Date.now() - 3600000).toISOString(),
    level: 'warn',
    module: '数据库',
    message: '数据库连接池使用率较高'
  },
  {
    timestamp: new Date(Date.now() - 7200000).toISOString(),
    level: 'error',
    module: '邮件服务',
    message: '邮件发送失败'
  }
]

// ==================== 工具函数 ====================
/**
 * 使用示例数据填充表单
 * 当后端API不可用时，使用预定义的示例数据
 */
const useSampleData = () => {
  isUsingSampleData.value = true
  Object.assign(siteInfoForm, sampleSiteInfo)
  Object.assign(emailConfigForm, sampleEmailConfig)
  Object.assign(backupConfigForm, sampleBackupConfig)
  systemLogs.value = sampleSystemLogs
}

// ==================== API调用函数 ====================
/**
 * 获取系统设置
 * 从后端API获取系统配置信息，失败时使用示例数据
 */
const fetchSystemSettings = async () => {
  try {
    const response = await get(API_PATHS.SYSTEM_SETTINGS.GET, {
      timeout: 8000,
      retry: 2
    })

    if (response && response.success && response.data) {
      const data = response.data
      Object.assign(siteInfoForm, data.siteInfo || {})
      Object.assign(emailConfigForm, data.emailConfig || {})
      Object.assign(backupConfigForm, data.backupConfig || {})
      isUsingSampleData.value = false
    } else {
      useSampleData()
    }
  } catch (error) {
    console.error('获取系统设置失败:', error)
    useSampleData()
  }
}

/**
 * 保存备份配置
 * 将备份配置信息保存到后端
 */
const saveBackupConfig = async () => {
  try {
    // 验证备份配置表单
    await backupConfigFormRef.value.validate()

    isSaving.value = true

    const response = await put(API_PATHS.SYSTEM_SETTINGS.UPDATE_BACKUP_CONFIG, backupConfigForm, {
      timeout: 8000,
      retry: 2
    })

    if (response && response.success) {
      ElMessage.success('备份配置保存成功')
      isUsingSampleData.value = false
    } else {
      throw new Error('保存失败')
    }
  } catch (error) {
    if (error === 'validation failed') {
      ElMessage.error('请检查备份配置填写是否正确')
    } else {
      console.error('保存备份配置失败:', error)
      ElMessage.error('保存备份配置失败，请重试')
    }
  } finally {
    isSaving.value = false
  }
}

/**
 * 保存邮件配置
 * 将邮件服务器配置信息保存到后端
 */
const saveEmailConfig = async () => {
  try {
    // 验证邮件配置表单
    await emailConfigFormRef.value.validate()

    isSaving.value = true

    const response = await put(API_PATHS.SYSTEM_SETTINGS.UPDATE_EMAIL_CONFIG, emailConfigForm, {
      timeout: 8000,
      retry: 2
    })

    if (response && response.success) {
      ElMessage.success('邮件配置保存成功')
      isUsingSampleData.value = false
    } else {
      throw new Error('保存失败')
    }
  } catch (error) {
    if (error === 'validation failed') {
      ElMessage.error('请检查邮件配置填写是否正确')
    } else {
      console.error('保存邮件配置失败:', error)
      ElMessage.error('保存邮件配置失败，请重试')
    }
  } finally {
    isSaving.value = false
  }
}

/**
 * 保存网站信息
 * 将网站基本信息保存到后端
 */
const saveSiteInfo = async () => {
  try {
    // 验证网站信息表单
    await siteInfoFormRef.value.validate()

    isSaving.value = true

    const response = await put(API_PATHS.SYSTEM_SETTINGS.UPDATE_SITE_INFO, siteInfoForm, {
      timeout: 8000,
      retry: 2
    })

    if (response && response.success) {
      ElMessage.success('网站信息保存成功')
      isUsingSampleData.value = false
    } else {
      throw new Error('保存失败')
    }
  } catch (error) {
    if (error === 'validation failed') {
      ElMessage.error('请检查网站信息填写是否正确')
    } else {
      console.error('保存网站信息失败:', error)
      ElMessage.error('保存网站信息失败，请重试')
    }
  } finally {
    isSaving.value = false
  }
}

/**
 * 保存所有设置
 * 一次性保存所有系统配置信息
 */
const saveAllSettings = async () => {
  try {
    // 验证网站信息表单
    await siteInfoFormRef.value.validate()

    isSaving.value = true

    const settingsData = {
      siteInfo: siteInfoForm,
      emailConfig: emailConfigForm,
      backupConfig: backupConfigForm
    }

    const response = await put(API_PATHS.SYSTEM_SETTINGS.UPDATE, settingsData, {
      timeout: 10000,
      retry: 2
    })

    if (response && response.success) {
      ElMessage.success('系统设置保存成功')
      // 更新示例数据状态
      isUsingSampleData.value = false
    } else {
      throw new Error('保存失败')
    }
  } catch (error) {
    if (error === 'validation failed') {
      ElMessage.error('请检查表单填写是否正确')
    } else {
      console.error('保存系统设置失败:', error)
      ElMessage.error('保存系统设置失败，请重试')
    }
  } finally {
    isSaving.value = false
  }
}

/**
 * 测试邮件配置
 * 发送测试邮件验证邮件服务器配置是否正确
 */
const testEmailConfig = async () => {
  try {
    isTestingEmail.value = true

    const response = await post(API_PATHS.SYSTEM_SETTINGS.TEST_EMAIL, emailConfigForm, {
      timeout: 10000,
      retry: 2
    })

    if (response && response.success) {
      ElMessage.success('邮件配置测试成功')
    } else {
      throw new Error('邮件配置测试失败')
    }
  } catch (error) {
    console.error('邮件配置测试失败:', error)
    ElMessage.error('邮件配置测试失败')
  } finally {
    isTestingEmail.value = false
  }
}

/**
 * 创建备份
 * 立即创建系统备份文件
 */
const createBackup = async () => {
  try {
    isCreatingBackup.value = true

    const response = await post(API_PATHS.SYSTEM_SETTINGS.BACKUP, backupConfigForm, {
      timeout: 30000,
      retry: 2
    })

    if (response && response.success) {
      ElMessage.success('备份创建成功')
    } else {
      throw new Error('备份创建失败')
    }
  } catch (error) {
    console.error('备份创建失败:', error)
    ElMessage.error('备份创建失败')
  } finally {
    isCreatingBackup.value = false
  }
}

/**
 * 加载系统日志
 * 根据筛选条件获取系统日志列表
 */
const loadLogs = async () => {
  try {
    isLoadingLogs.value = true

    // 构建查询参数
    const params = new URLSearchParams()
    if (logLevel.value) params.append('level', logLevel.value)

    const url = params.toString() ? `${API_PATHS.SYSTEM_SETTINGS.LOGS}?${params.toString()}` : API_PATHS.SYSTEM_SETTINGS.LOGS

    const response = await get(url, {
      timeout: 8000,
      retry: 2
    })

    if (response && response.success && response.data) {
      systemLogs.value = response.data.logs || []
    } else {
      systemLogs.value = sampleSystemLogs
    }
  } catch (error) {
    console.error('加载系统日志失败:', error)
    systemLogs.value = sampleSystemLogs
  } finally {
    isLoadingLogs.value = false
  }
}

/**
 * 清空日志
 * 清空所有系统日志，需要用户确认
 */
const clearLogs = async () => {
  try {
    // 显示确认对话框
    await ElMessageBox.confirm('确定要清空所有系统日志吗？此操作不可恢复。', '确认清空', {
      type: 'warning'
    })

    isClearingLogs.value = true

    const response = await post(API_PATHS.SYSTEM_SETTINGS.CLEAR_LOGS, {}, {
      timeout: 8000,
      retry: 2
    })

    if (response && response.success) {
      ElMessage.success('系统日志清空成功')
      await loadLogs() // 重新加载日志
    } else {
      throw new Error('清空日志失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('清空日志失败:', error)
      ElMessage.error('清空日志失败')
    }
  } finally {
    isClearingLogs.value = false
  }
}

// ==================== 工具函数 ====================
/**
 * 获取日志级别对应的标签类型
 * @param level 日志级别
 * @returns Element Plus标签类型
 */
const getLogLevelType = (level: string) => {
  const levelMap: { [key: string]: string } = {
    error: 'danger',
    warn: 'warning',
    info: 'info',
    debug: 'success'
  }
  return levelMap[level] || 'info'
}

/**
 * 格式化日期时间
 * @param dateString ISO格式的日期字符串
 * @returns 本地化的日期时间字符串
 */
const formatDateTime = (dateString: string) => {
  return new Date(dateString).toLocaleString('zh-CN')
}

// ==================== 生命周期钩子 ====================
/**
 * 组件挂载时初始化数据
 * 获取系统设置和系统日志
 */
onMounted(() => {
  fetchSystemSettings()
  loadLogs()
})
</script>

<style scoped lang="scss">
// 导入系统设置页面样式
@use '../../assets/styles/admin/_system-settings';

// 强制输入框边框可见 - 使用:deep()确保样式生效
:deep(.el-input),
:deep(.el-textarea),
:deep(.el-input-number),
:deep(.el-select) {
  .el-input__wrapper {
    border: 1px solid #dcdfe6 !important;
    border-radius: 4px !important;
    box-shadow: 0 0 0 1px #dcdfe6 inset !important;
    background-color: #ffffff !important;

    &:hover {
      border-color: #c0c4cc !important;
      box-shadow: 0 0 0 1px #c0c4cc inset !important;
    }

    &.is-focus {
      border-color: #409eff !important;
      box-shadow: 0 0 0 1px #409eff inset !important;
    }

    &.is-disabled {
      border-color: #e4e7ed !important;
      box-shadow: 0 0 0 1px #e4e7ed inset !important;
      background-color: #f5f7fa !important;
    }
  }

  .el-input__inner {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

// 专门针对textarea的边框样式
:deep(.el-textarea) {
  .el-textarea__inner {
    border: 2px solid #dcdfe6 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    resize: vertical !important;

    &:hover {
      border-color: #c0c4cc !important;
    }

    &:focus {
      border-color: #409eff !important;
      outline: none !important;
    }
  }

  .el-input__wrapper {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

// 专门针对网站描述textarea的边框样式
:deep(.site-description-textarea) {
  .el-textarea__inner {
    border: 3px solid #dcdfe6 !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    resize: vertical !important;

    &:hover {
      border-color: #c0c4cc !important;
    }

    &:focus {
      border-color: #409eff !important;
      outline: none !important;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
    }
  }

  .el-input__wrapper {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}
</style>
